<template>
  <div>

    <h2>计算属性</h2>

    <!-- 计算属性，必须当做属性来使用，不能当做方法来使用，不能加小括号 -->
    <input type="text"  v-model="xing" />
    <input type="text"  v-model="ming" />

    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>

    <h2>调用methods中的方法</h2>

    <p>{{ getName() }}</p>
    <p>{{ getName() }}</p>
    <p>{{ getName() }}</p>

  </div>
</template>

<script>
export default {
  data() {
    return {
      xing: '张',
      ming: '三'
    }
  },
  //  计算属性，要写到 和 data 平级的 computed 中
  computed: {
    //  所有的计算属性，都放到这里。 【计算属性，必须返回计算的结果】
    fullName () {
      console.log('计算属性方法执行了~~~~')
      return this.xing + this.ming
    }
  },
    methods: {
      getName () {
        console.log('计算方法执行了！！！')
        return this.xing + this.ming 
    } 
  }
}

</script>


<style>

</style>
